Selectors in CSS

Selectors tell CSS which elements to apply the style too

There are four basic types of selectors in CSS:
  1. Element or Type Selector
  2. ID Selector
  3. Class Selector
  4. Grouping Selector
Examples of Element Selectors:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum dolores reprehenderit officia voluptatibus nemo distinctio sint consectetur eos totam? Enim odit recusandae quae expedita error praesentium, doloremque quam voluptatum, nesciunt, dicta laboriosam. Porro qui dignissimos expedita, accusamus assumenda dolorem ab deleniti itaque ex, asperiores exercitationem ipsam reprehenderit libero perspiciatis. Saepe.

All paragraphs are set to be justified using an element selector

/*Examples of element selectors*/ body { font-family: Georgia, 'Times New Roman', Times, serif; width: 90%; background-color: azure; } p { text-align: justify; } u { background-color: aqua; }
Example of ID selector:
Styles applied using CSS id selector. 
                

#idSelector {
    border-radius: 20px;
    margin:auto;
    margin-top: 20px;
    padding: 20px;
    background-color: blue;
    width: 50%;
}
Example of class selector:
Styles applied using CSS class selector. 
                

.menu {
    margin-top: 10px;
    background-color: black;
}
.menu-item
{
    border-right: 1px solid gray;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: white;
    text-align: center;
    padding-right: 5px;
    margin: 0px;
    background-color: black;
    marker: none;
    display: inline;
}
.menu-item:hover 
{
    color: red;
}
Examples of grouping selectors (a.k.a. selector lists):

If need be, a rule can be applied to multiple elements, classes, ids or a combination of them. However, if any of the selectors makes the rule invalid, it will not be applied to any of the selectors. Use forgiving selectors to allow for invalid rules for some selectors.

The heading and the text below have been styled using selector lists:

Heading 3

Normal Text
/*Unforgiving Group Selectors*/ #GroupSelectors h3, .special { border-radius: 5px; border: 2px solid red; color: blue; } /*Forgiving Group Selectors*/ :is(#GroupSelectors h3, .special) { border-radius: 5px; border: 2px solid red; color: blue; }